<template>
  <basic-dialog
    width="60%"
    title="关联品牌"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleClose"
  >
    <BasicForm
      ref="formRef"
      actionPosition="start"
      btnBarStyle="padding-left: 10px;"
      :hasQueryPermission="false"
      :formColumns="formItems"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      @getFormData="getFormData"
    />
    <el-divider />
    <Toolbar
      ref="toolbarRef"
      :brand-info="brandInfo"
      @update-brand="updateBrandInfo"
      @update-series="updateSeriesInfo"
    />
    <el-divider />
    <BtnRender :render="renderBtnsBar" />
    <SkusTable
      showActionCol
      showPagination
      :tableHeight="480"
      :dataSource="TableInfo.list"
      :columns="TableInfo.columns"
      :loading="TableInfo.loading"
      :pageSizes="pageSizes"
      :pagination="pagination"
      :total="total"
      :actionRender="renderTableBtnAction"
      @rowDblclick="handleRowDblclick"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import Toolbar from './Toolbar';
import TextToolTip from '@/components/ShowContent/TextTooltip';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import skusPage from '@/mixins/commodity/skusPage';
import { getFormBrandListService } from '@/api/commodity/common';
export default {
  mixins: [skusPage],
  components: {
    BtnRender,
    BasicDialog,
    BasicForm,
    SkusTable,
    Toolbar,
    TextToolTip
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      brandInfo: {}, // 选择的品牌信息
      seriesInfo: {}, // 选择的系列信息
    }
  },
  watch: {
    visible (val) {
      val && this.getTableData()
    }
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnList = [
        {
          label: '确定',
          method: this.handleConfirm,
        },
        {
          label: '取消',
          method: this.handleClose,
          type: 'default'
        },
      ]
      return getListPageBtnsBar(h, btnList)
    },
    // 渲染表格按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [{
        label: '选择',
        method: this.handleSelectBrand
      }]
      return getTableAction({ h, row, actionList })
    },
    // 获取表格数据
    async getTableData () {
      const data = {
        ...this.formData,
        ...this.paginationParams
      }
      const res = await getFormBrandListService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData?.results)
      this.setTotalNum(res?.retData?.totalNum ?? 0)
    },
    // 确定
    handleConfirm () {
      const data = {
        brandUuid: this.brandInfo.uuid ?? '',
        brandName: this.brandInfo.brandName ?? '',
        seriesUuid: this.seriesInfo.uuid ?? '',
        seriesInfoVos: this.seriesInfo.options ?? []
      }
      if (!data.brandName) {
        return this.$message.warning('品牌不能为空')
      }
      if (this.brandInfo.brandType == '1' && !data.seriesUuid) { // 正常品牌系列必填；潜在品牌无系列无需必填
        return this.$message.warning('请选择系列')
      }
      this.$emit('update', data)
      this.handleClose()
      this.brandInfo = {}
      this.seriesInfo = {}
      this.$refs.formRef.handleResetForm()
      this.$refs.toolbarRef.resetCustomBrandState() // 重置自定义品牌状态
      this.$refs.toolbarRef.resetSeriesState() // 重置系列状态
    },
    // 双击选中行
    handleRowDblclick ({ row }) {
      this.handleSelectBrand(row)
    },
    // 关闭弹窗
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 选择品牌
    handleSelectBrand (row) {
      this.brandInfo = _.pick(row, ['brandName', 'uuid', 'brandType'])
      this.$refs.toolbarRef.resetCustomBrandState() // 重置自定义品牌状态
    },
    // 更新品牌信息数据
    updateBrandInfo (brandInfo) {
      this.brandInfo = { ...brandInfo }
    },
    // 更新系列信息数据
    updateSeriesInfo (seriesInfo) {
      this.seriesInfo = { ...seriesInfo }
    }
  }
}
</script>
<style lang="less" scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
.label_w {
  width: 108px;
  text-align: right;
}
</style>
